<template>
	<view class="page">
		<view class="top_swiper">
			<u-notice-bar class="notice" type="none" mode="horizontal" :list="noticeList"
				bg-color="rgba(255, 255, 255, 0.7)" border-radius="10" font-size="26"></u-notice-bar>
			<u-swiper :list="list" mode="dot" :height="420" :title="true"></u-swiper>
		</view>
		<view class="center_nav public">
			<view class="nav_item" hover-class="shodow" v-for="(item, index) in navList" :key="index"
				@click="navto(item.path)">
				<image :src="item.url" mode="widthFix"></image>
				<text class="clickText">{{item.title}}</text>
			</view>
		</view>
		<view class="pd bgwhite">
			<view class="fl-rsb mgb">
				<text class="homeTitle">精选推荐</text>
				<!-- <text @click="loadMore">查看更多</text> -->
			</view>
			<view class="grid_list">
				<view v-for="(item, index) in serviceList" :key="index" class="">
					<serverCard :item="item" @goDetail="goDetail" :isSite="false" />
				</view>
			</view>
		</view>
		<view class="bottom_parking public" v-show="false">
			<view class="parking_title">
				<text>附近停车场</text>
				<text @click="loadMore">查看更多</text>
			</view>
			<view class="parking_list">
				<view class="parking-item" hover-class="parking-hover" v-for="(item, index) in parkingList"
					:key="index">
					<view class="parking-distance">
						<text class="parking-spots">{{item.spots}}</text>
						<text>个空车位</text>
					</view>
					<view class="parking-distance">
						<text class="parking-name ellipsis">{{item.name}}</text>
					</view>
					<view class="parking-distance">
						<image class="image" src="/static/images/location.png" mode="widthFix"></image>
						<text class="parking-address ellipsis">{{item.address}}</text>
					</view>
					<view class="parking-distance">
						<image class="image" src="/static/images/address.png" mode="widthFix"></image>
						<text class="parking-address ellipsis">{{item.distance}}公里</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import snow from "../../static/images/snow.jpg"
	import water from "../../static/images/water.jpg"
	import autumn from "../../static/images/autumn.jpg"
	import router from "@/ya/router/index.js";
	import serverCard from "@/components/serverCard.vue";
	export default {
		components:{
			serverCard
		},
		data() {
			return {
				list: [{
						image: autumn,
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: water,
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: snow,
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				noticeList: [
					'寒雨连江夜入吴',
					'平明送客楚山孤',
					'洛阳亲友如相问',
					'一片冰心在玉壶'
				],
				serviceList: [{
					title: '牛肉面(XXX店)',
					subTitle: '精选牛肉，鲜嫩美味',
					imgUrl: '/static/images/autumn.jpg',
					distance: '0.55'
				},{
					title: '牛肉面(XXX店)',
					subTitle: '精选牛肉，鲜嫩美味',
					imgUrl: '/static/images/autumn.jpg',
					distance: '0.55'
				},{
					title: '牛肉面(XXX店)',
					subTitle: '精选牛肉，鲜嫩美味',
					imgUrl: '/static/images/autumn.jpg',
					distance: '0.55'
				},{
					title: '牛肉面(XXX店)',
					subTitle: '精选牛肉，鲜嫩美味',
					imgUrl: '/static/images/autumn.jpg',
					distance: '0.55'
				}],
				navList: [{
					title: '停车',
					url: '/static/images/parking.png',
					path: '/pages/parking/parking'
				}, {
					title: '服务',
					url: '/static/images/server.png',
					path: '/pages/server/server'
				}, {
					title: '餐饮',
					url: '/static/images/food.png',
					path: '/pages/catering/cateringList'
				}, {
					title: '景点',
					url: '/static/images/attractions.png',
					path: '/pages/attractions/attractions'
				}],
				parkingList: [{
					spots: 5,
					name: "鲁家村南巷",
					address: "鲁家村南巷",
					distance: 0.6
				}, {
					spots: 12,
					name: "鲁家村路(雁塔路-太乙雁塔路-太乙)",
					address: "鲁家村路(雁塔路-雁塔路-太乙)",
					distance: 0.8
				}, {
					spots: 12,
					name: "鲁家村路(雁塔路-太乙雁塔路-太乙)",
					address: "鲁家村路(雁塔路-雁塔路-太乙)",
					distance: 0.6
				}, {
					spots: 12,
					name: "鲁家村路(雁塔路-太乙雁塔路-太乙)",
					address: "鲁家村路(雁塔路-雁塔路-太乙)",
					distance: 0.6
				}]
			}
		},
		methods: {
			navto(path) {
				router.go(path);
			},
			goDetail(e) {
				router.go(`/pages/catering/cateringDetail?id=${e}`)
			}
		}
	}
</script>

<style scoped lang="scss">
	.top_swiper {
		height: 420rpx;
		position: relative;

		.notice {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			left: 20rpx;
			z-index: 999999;
		}
	}

	.public {
		background-color: #ffffff;
		box-shadow: 0rpx 5rpx 8rpx 0rpx rgba(0, 0, 0, 0.06);
	}

	.center_nav {
		height: 180rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 30rpx 80rpx;

		.nav_item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #000000;

			image {
				width: 68rpx;
				margin-bottom: 15rpx;
			}
		}

		.shodow {

			// box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
			.clickText {
				color: #3b90fd;
			}
		}
	}

	.bottom_parking {
		height: calc(100% - 620rpx);
		box-sizing: border-box;
		padding: 30rpx 20rpx;

		.parking_title {
			font-size: 36rpx;
			line-height: 52rpx;
			display: flex;
			justify-content: space-between;

			&>text:last-child {
				font-size: 24rpx;
				color: #999999;

				&:active {
					color: #3b90fd;
				}
			}
		}

		.parking_list {
			height: calc(100% - 52rpx);
			display: flex;
			flex-wrap: wrap;

			.parking-item {
				width: calc(50% - 10rpx);
				height: calc(50% - 15rpx);
				background-color: rgba(59, 144, 253, 0.05);
				border-radius: 10rpx;
				margin: 10rpx;
				box-sizing: border-box;
				padding: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				&:nth-child(2n) {
					margin-right: 0rpx;
				}

				&:nth-child(2n-1) {
					margin-left: 0rpx;
				}

				&:nth-child(n+3) {
					margin-bottom: 0;
				}

				.parking-distance {
					display: flex;
					align-items: center;

					.image {
						width: 32rpx;
						margin-right: 5rpx;
					}

					.parking-spots {
						font-size: 32rpx;
						color: #000000;
						font-weight: bold;
					}

					.parking-name {
						font-size: 26rpx;
						color: #555555;
					}

					.parking-address {
						font-size: 26rpx;
						color: #999999;
						width: calc(100% - 37rpx);
					}

					.ellipsis {
						display: inline-block;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap; //文本不换行，这样超出一行的部分被截取，显示...
					}
				}
			}

			.parking-hover {
				box-shadow: 0rpx 5rpx 8rpx 0rpx rgba(0, 0, 0, 0.06);
			}
		}
	}

	.grid_list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		gap: 20rpx;
	}
	.homeTitle{
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
	}
</style>